import React, { Component } from 'react';
import { Carousel, Input, Tabs, Icon } from 'antd';
import styles from "./index.less";
import imga from './img/img1.jpg'
import imgb from './img/img2.jpg'
import imgc from './img/img3.jpg'
import lefta from './img/lefta.png'
import righta from './img/righta.png'

class Home extends Component {
  constructor(props) {
    super(props);
    this.next = this.next.bind(this);
    this.prev = this.prev.bind(this);
    this.state = {
      list: [
        { img: imga, title: '第一步' },
        { img: imgb, title: '第二步' },
        { img: imgc, title: '第三步' },
      ],
      // indexZdy:Number(this.state.list.length),
      right: true,
      left: true,
    };
  }

  componentDidMount() {
    console.log(Number(this.state.list.length))
    this.setState({ indexZdy: Number(this.state.list.length) - 1 })
  }

  next() {
    this.slider.slick.slickNext();
  }

  prev() {
    this.slider.slick.slickPrev();
  }

  zdyafter = (index) => {
    console.log(index, this.state.indexZdy)
    if (this.state.indexZdy == index) { this.setState({ right: false }) } else { this.setState({ right: true }) }
    if (index == 0) { this.setState({ left: false }) } else { this.setState({ left: true }) }
  }
 
  axiostz = (val) => {
    if(val == '0'){
      const w = window.open('about:blank');
      w.location.href = '/img'
    }
    if(val == '1'){
      const w = window.open('about:blank');
      w.location.href = '/imgTwo'
    }
    if(val == '2'){
      const w = window.open('about:blank');
      w.location.href = '/imgThree'
    }
    
  }

  render() {
    const lunboSetting = {
      dots: true,
      lazyLoad: true,
      autoplay: false,
      loop: false
    };
    const imgQh = { width: 45, height: 45 }
    return (
      <div className={styles.flex}>
        {this.state.left ? <img className={styles.leftzdya} onClick={this.prev} src={lefta} /> : <div className={styles.leftzdya}></div>}
        <div style={{ width: '78%', height: '78%', margin: '0px 10px 0px 10px' }}>
          <Carousel afterChange={this.zdyafter}   {...lunboSetting} ref={el => (this.slider = el)}>
            {this.state.list.map((item, index) => {
              //  if(this.state.indexZdy==index){this.setState({right:false})}else{this.setState({right:true})}
              return (
                <div key={index}>
                  <h3>{item.title}</h3>
                  <img  onClick={()=>{this.axiostz(index)}} a style={{ width: '100%', height: '100%' }} src={item.img} />
                </div>
              )
            })}
          </Carousel>
        </div>
        {this.state.right ? <img className={styles.leftzdy} onClick={this.next} src={righta} /> : <div className={styles.leftzdy}></div>}

        {/* <Icon style={{ fontSize: 24 }} type="right-circle" onClick={this.next} /> */}
      </div>
    )
  }
}

export default Home;